<template>
<div>
  <van-swipe :autoplay="2000" indicator-color="#f00">
    <van-swipe-item v-for="(image, index) in images" :key="index">
      <img :src="image" />
    </van-swipe-item>
  </van-swipe>
  <ul>
    <li v-for="(item, index) in txt" :key="index">
      {{item}}
    </li>
  </ul>
</div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
import { Lazyload } from 'vant';
Vue.use(Lazyload);

export default {
  data() {
    return {
      images: [
        'https://ftp.bmp.ovh/imgs/2021/03/66684005f8e0185e.jpg',
        'https://ftp.bmp.ovh/imgs/2021/03/571791ae6921bb48.jpg',
        'https://ftp.bmp.ovh/imgs/2021/03/d279b4ea4dbd699b.jpg',
        'https://ftp.bmp.ovh/imgs/2021/03/6050c378dc34ff74.jpg',
        'https://s3.bmp.ovh/imgs/2021/10/909ebf5e8d2b91e7.jpg'
      ],
      txt: [
        '北京故宫',
        '鸟巢国家体育场',
        '十七孔桥',
        '北京地坛',
        '国家大剧院',
      ]
    };
  },
};
</script>


<style>
.van-swipe {
  width: 100%;
  border: 1px solid red;
  overflow: hidden;
}
.van-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
  float: left;
}
.van-swipe .van-swipe-item img {
  width: 100%;
  vertical-align: top;
}
ul {
  margin: 0 auto;
}
ul > li {
  float: left;
  margin: 10px 20px 0 20px;
  text-align: center;
}
</style>

